import React, { createContext, useContext } from "react"

const countContext = createContext()

const Foo = () => {
    const value = useContext(countContext)
    return (
        <div>
            {value.name}
        </div>
    )
}

const Child = () => {
    return (
        <div>
            <Foo />
        </div>
    )
}

const UseContextComponent = () => {
    return (
        <countContext.Provider value={{ name: 'jack' }}>
            <h1>useContext</h1>
            <Child />
        </countContext.Provider>
    )
}

export default UseContextComponent